<template>
  <section class="chart-container">
    <div class="select_top">
      <el-date-picker
        style="width:15%;margin-right:1%"
        v-model="year"
        type="year"
        placeholder="选择年"
        :clearable="false"
        valueFormat="yyyy"
      >
      </el-date-picker>
      <el-date-picker
        v-model="month"
        style="width:15%;margin-right:1%"
        type="month"
        :clearable="false"
        valueFormat="MM"
        format="MM"
        placeholder="选择月"
      >
      </el-date-picker>
      <!-- <el-date-picker
        style="width:15%;margin-right:1%"
        v-model="month"
        :clearable="false"
        type="month"
        placeholder="选择月"
        valueFormat="MM"
        format="MM"
      >
      </el-date-picker> -->
      <el-button @click="getData">查询</el-button>
    </div>
    <el-row :gutter="20" class="ctop1" style="margin-right:0">
      <el-col :span="10"><div id="tab1" style="width:100%; height:440px;background:#fff"></div></el-col>
      <el-col :span="14" style="padding:0">
        <el-row :gutter="20" class="ctop1">
          <el-col :span="12"><div id="tab2" style="width:100%; height:200px;background:#fff"></div></el-col>
          <el-col :span="12"><div id="tab3" style="width:100%; height:200px;background:#fff"></div></el-col>
        </el-row>
        <el-row :gutter="10" class="ctop1">
          <el-col :span="12"><div id="tab4" style="width:100%; height:200px;background:#fff"></div></el-col>
          <el-col :span="12"><div id="tab5" style="width:100%; height:200px;background:#fff"></div></el-col>
        </el-row>
      </el-col>

    </el-row>
    <el-table
      :data="leftData"
      style="width: 100%;margin-bottom:10%"
    >
      <el-table-column
        type="index"
        width="100"
        label="序号"
      >
      </el-table-column>
      <el-table-column
        prop="hash.code_name"
        label="类别"
      >
      </el-table-column>
      <el-table-column
        prop="hash.maxscore"
        label="总分"
      >
      </el-table-column>
      <el-table-column
        prop="hash.score"
        label="平均得分"
      >
      </el-table-column>
    </el-table>
  </section>
</template>

<script>
import echarts from 'echarts';
import '../../static/css/index.css';
/* 引入样式 */
export default {
  props: ['headTitle'],
  data() {
    return {
      data1: [],
      data11: [],
      data2: [],
      data22: [],
      data3: [],
      data33: [],
      data4: [],
      data44: [],
      data5: [],
      data55: [],
      leftData: [],
      month: '',
      year: '',
      ts: this.newStore(),
      chartBar: null,
      topList: [],
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄',
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄',
      }],
    };
  },
  created() {
    this.year = `${new Date().getFullYear()}`;
    this.month = `${new Date().getMonth() + 1}`;

    if (this.month < 10) {
      this.month = 0 + this.month;
    }
    this.getData();
  },
  methods: {
    getleftData() {
      const req = {
        handle: '897AEEB66312B81BA0AC762A3124361636D18A443522A98D',
        month: `${this.year}-${this.month}`,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.leftData = ts.d.data.operation1;
        for (let i = 0; i < this.leftData.length; i += 1) {
          this.data1.push(this.leftData[i].hash.code_name);
          this.data11.push(this.leftData[i].hash.score);
        }
        this.tab1();
      });
    },
    getData() {
      this.data1 = [];
      this.data11 = [];
      this.data2 = [];
      this.data22 = [];
      this.data3 = [];
      this.data33 = [];
      this.data4 = [];
      this.data44 = [];
      this.data5 = [];
      this.data55 = [];
      this.getleftData();
      const req2 = {
        handle: '897AEEB66312B81BA0AC762A31243616F781403946DA05FD',
        supcode: '0102',
        month: `${this.year}-${this.month}`,
      };
      const req3 = {
        handle: '897AEEB66312B81BA0AC762A31243616F781403946DA05FD',
        supcode: '0103',
        month: `${this.year}-${this.month}`,
      };
      const req4 = {
        handle: '897AEEB66312B81BA0AC762A31243616F781403946DA05FD',
        supcode: '0104',
        month: `${this.year}-${this.month}`,
      };
      const req5 = {
        handle: '897AEEB66312B81BA0AC762A31243616F781403946DA05FD',
        supcode: '0105',
        month: `${this.year}-${this.month}`,
      };
      this.spost(this.ts, '/mainservlet', req2).then((ts) => {
        const miniTable2 = ts.d.data.operation1;
        for (let i = 0; i < miniTable2.length; i += 1) {
          this.data2.push(miniTable2[i].hash.code_name);
          this.data22.push(miniTable2[i].hash.score);
        }
        this.tab2();
      });
      this.spost(this.ts, '/mainservlet', req3).then((ts) => {
        const miniTable3 = ts.d.data.operation1;
        for (let i = 0; i < miniTable3.length; i += 1) {
          this.data3.push(miniTable3[i].hash.code_name);
          this.data33.push(miniTable3[i].hash.score);
        }
        this.tab3();
      });
      this.spost(this.ts, '/mainservlet', req4).then((ts) => {
        const miniTable4 = ts.d.data.operation1;
        for (let i = 0; i < miniTable4.length; i += 1) {
          this.data4.push(miniTable4[i].hash.code_name);
          this.data44.push(miniTable4[i].hash.score);
        }
        this.tab4();
      });
      this.spost(this.ts, '/mainservlet', req5).then((ts) => {
        const miniTable5 = ts.d.data.operation1;
        for (let i = 0; i < miniTable5.length; i += 1) {
          this.data5.push(miniTable5[i].hash.code_name);
          this.data55.push(miniTable5[i].hash.score);
        }
        this.tab5();
      });
    },
    tab1() {
      const chartColumn1 = echarts.init(document.getElementById('tab1'));
      const option1 = {
        title: {
          text: '城市管理',
        },
        tooltip: {},
        legend: {
          data: this.data1,
          left: 'right',
        },
        xAxis: {
          data: this.data1,
        },
        yAxis: {},
        series: [{
          name: '城市管理',
          type: 'bar',
          itemStyle: {
            normal: {
              color(params) {
                const colorList = ['#C33531', '#EFE42A', '#64BD3D'];
                return colorList[params.dataIndex];
              },
            },
          },
          data: this.data11,
        }],
      };
      chartColumn1.setOption(option1);
    },
    tab2() {
      const chartColumn2 = echarts.init(document.getElementById('tab2'));
      const option2 = {
        title: {
          text: '城市管理',
        },
        tooltip: {},
        legend: {
          data: this.data2,
          left: 'right',
        },
        xAxis: {
          data: this.data2,
        },
        yAxis: {},
        series: [{
          name: '城市管理',
          type: 'bar',
          itemStyle: {
            normal: {
              color(params) {
                const colorList = ['#C33531', '#EFE42A', '#64BD3D'];
                return colorList[params.dataIndex];
              },
            },
          },
          data: this.data22,
        }],
      };
      chartColumn2.setOption(option2);
    },
    tab3() {
      const chartColumn3 = echarts.init(document.getElementById('tab3'));
      const option3 = {
        title: {
          text: '党建和作风效能建设',
        },
        tooltip: {},
        legend: {
          data: this.data3,
          left: 'right',
        },
        xAxis: {
          data: this.data3,
        },
        yAxis: {},
        series: [{
          name: '党建和作风效能建设',
          type: 'bar',
          itemStyle: {
            normal: {
              color(params) {
                const colorList = ['#C33531', '#EFE42A', '#64BD3D'];
                return colorList[params.dataIndex];
              },
            },
          },
          data: this.data33,
        }],
      };
      chartColumn3.setOption(option3);
    },
    tab4() {
      const chartColumn4 = echarts.init(document.getElementById('tab4'));
      const option4 = {
        title: {
          text: '民生服务',
        },
        tooltip: {},
        legend: {
          data: this.data4,
          left: 'right',
        },
        xAxis: {
          data: this.data4,
        },
        yAxis: {},
        series: [{
          name: '民生服务',
          type: 'bar',
          itemStyle: {
            normal: {
              color(params) {
                const colorList = ['#C33531', '#EFE42A', '#64BD3D'];
                return colorList[params.dataIndex];
              },
            },
          },
          data: this.data44,
        }],
      };
      chartColumn4.setOption(option4);
    },
    tab5() {
      const chartColumn5 = echarts.init(document.getElementById('tab5'));
      const option5 = {
        title: {
          text: '社会治理',
        },
        tooltip: {},
        legend: {
          data: this.data5,
          left: 'right',
        },
        xAxis: {
          data: this.data5,
        },
        yAxis: {},
        series: [{
          name: '社会治理',
          type: 'bar',
          itemStyle: {
            normal: {
              color(params) {
                const colorList = ['#C33531', '#EFE42A', '#64BD3D'];
                return colorList[params.dataIndex];
              },
            },
          },
          data: this.data55,
        }],
      };
      chartColumn5.setOption(option5);
    },

  },
};
</script>

<style lang="stylus" scoped>
.el-col
  padding: 20px;
.c_top1
  div
    background #fff
    text-align center
</style>
